<template>
	<view class="default-content">
		<view>
			<uni-swiper-dot :info="info.img" >
				<swiper class="swiper-box" style="height: 400px;">
					<swiper-item v-for="(item ,index) in info.img" :key="index" >
						<image style="width: 100%;height: 400px;" :src="item" mode="aspectFit" @click="onBigImage(index)"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<uni-list :border="false">
			<uni-list-item :avatar-circle="true" :title="info.publish_user.name" :thumb="info.publish_user.head_img" thumb-size="lg">
				<template v-slot:header>
					<view class="slot-box">
						<image class="head-image50 mr15" :src="info.publish_user.head_img" mode="widthFix"></image>
					</view>
				</template>
				<template v-slot:footer>
					<view class="text-right"><uni-tag class="concern" @click="onConcern" :inverted="info.concern" :text="info.concern == true ? '已关注' : '关注'" type="warning" /></view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="content">
			<uni-title type="h3" :title="info.title"></uni-title>
			<view class="fz07rem">{{info.create_time}}　|　{{info.click_um}}人观看</view>
		</view>
		<view class="view-line"></view>
		<view class="p8">{{info.content}}</view>
		<uni-section :title="'共'+info.comments_count+'条评论'" type="line" padding>
			<uni-list>
				<uni-list-chat v-for="item in info.comments" :key="item.id" :title="item.user.name" :avatar-circle="true" :avatar="item.user.head_img" :note="item.content" badge-positon="left">
					<view class="text-right">
						<view><text class="chat-custom-text">{{item.create_time}}</text></view>
						<uni-icons :color="item.is_like == 1 ? '#d81e06' : ''" @click="onCommentLike(item.id)" type="hand-up" size="18"></uni-icons>{{item.likes}}
					</view>
				</uni-list-chat>
			</uni-list>
		</uni-section>
		<view class="fixed-bottom">
			<uni-goods-nav v-show="!showComment" :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick" @buttonClick="buttonClick" />
			<view v-show="showComment" class="Comment text-center">
				<uni-easyinput type="textarea" v-model="CommentForm.content" placeholder="请输入内容" />
				<button class="mt15 mr15 default-button" type="primary" size="mini" @click="onSaveComment">提交</button>
				<button class="mt15 ml15" size="mini" @click="onClearComment">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					icon: 'hand-up',
					// iconPath: 'https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/like.png',
					text: '点赞',
					info:0,
					infoColor: "#333",
					infoBackgroundColor: '#EEE',
					type:'like',
				}, {
					icon: 'star',
					text: '收藏',
					info:0,
					infoColor: "#333",
					infoBackgroundColor: '#EEE',
					type:'collect'
				}, {
					icon: 'chat',
					text: '评论',
					info:0,
					infoColor: "#333",
					infoBackgroundColor: '#EEE',
					type:'Comment'
				}],
				customButtonGroup: [{ icon: 'shop',text: '说点什么', backgroundColor: 'linear-gradient(90deg, #FFD101, #FFD101)', color: '#333' }],
				id:0,
				form:{page:1},
				info:{img:[],title:'',create_time:'',click_um:0,content:''},
				recommend:[],
				showComment:false,
				Comment:{list:[],count:0,num:10,page:1},
				CommentForm:{article_id:0,content:''},
				
				shareinfo:{title:'',img:'',path:''}
			}
		},
		onLoad(options){
			this.id = options.id
			this.onGetInfo()
		},
		methods: {
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/interaction/'+_this.id,'GET').then(res => {
					res.data.img = JSON.parse(res.data.img)
					_this.info = res.data
					_this.options[0].info = _this.info.likes_count
					_this.options[1].info = _this.info.collections_count
					_this.options[2].info = _this.info.reply_num
					
					_this.info.comments_count = res.data.comments.length
					
					_this.info.comments.forEach((e) => {
						e.likes = e.likes.length
					})
					
					_this.shareinfo.title = _this.info.title
					_this.shareinfo.img = res.data.img[0]
				}).catch(err => {
					console.log(err)
				})
			},
			onConcern(){//关注
				let _this = this
				this.$request_api('applet_api/user/concern','PATCH',{id:_this.info.uid}).then(res => {
					if(res.code == 200){
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onLike(){
				let _this = this
				this.$request_api('applet_api/interaction/like','POST',{id:_this.id}).then(res => {
					if(res.code == 200){
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onCollect(){
				let _this = this
				this.$request_api('applet_api/interaction/collection','POST',{id:_this.id}).then(res => {
					if(res.code == 200){
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onComment(){
				
			},
			onClearComment(){
				this.showComment = false
			},
			onSaveComment(){
				let _this = this
				this.CommentForm.id = _this.id
				this.$request_api('applet_api/interaction/comment','PUT',this.CommentForm).then(res => {
					if(res.code == 200){
						_this.showComment = false
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onCommentLike(id){
				let _this = this
				this.$request_api('applet_api/interaction/comment/like','PATCH',{id:id}).then(res => {
					if(res.code == 200){
						_this.onGetInfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onClick(e) {
				if(e.content.type == 'like'){
					this.onLike()
				}
				if(e.content.type == 'collect'){
					this.onCollect()
				}
				if(e.content.type == 'Comment'){
					this.showComment = !this.showComment
				}
			},
			buttonClick(e) {
				if(e.index == 0){
					//评论
					this.showComment = !this.showComment
				}
				
			},
			onBigImage(index){
				this.$func.bigImageArr(this.info.img,index)
			}
			
		}
	}
</script>

<style scoped lang="scss">
.content{padding: 0px 15px 15px 15px;}
.Comment{padding: 8px;background-color: #FFF;}
.concern{position: relative;top: 14px;}
.chat-custom-text {
	font-size: 12px;
	color: #999;
}

</style>
